<!-- Photo -->
<template>
  <div
    class="photo-content"
    v-infinite-scroll="load"
    style="overflow: auto"
    infinite-scroll-immediate="true"
    infinite-scroll-disabled="disabled"
    infinite-scroll-distance="10"
    infinite-scroll-delay="300"
  >
    <div v-for="(date, index) in dateList" :key="index">
      <Timeline
        v-if="dateList"
        :date="date"
        :imgsUrl="imgsUrlArr[index]"
        :imgsId="imgsIdArr[index]"
        :orderIndex="index"
        lazy
      ></Timeline>
      <el-divider></el-divider>
    </div>
    <p v-if="loading">加载中...</p>
    <p v-if="noMore">
      <el-divider content-position="right">没有更多了</el-divider>
    </p>
  </div>
</template>
  
<script>
import { BASE_URL } from "../config";
//import { mapState } from "vuex";

import Timeline from "../components/Timeline";
export default {
  components: {
    Timeline,
  },
  data() {
    return {
      dateList: [],
      imgsUrlArr: [],
      imgsIdArr: [],
      lastDay: "",
      reqCount: 0,
      loading: false,
      noMore: false,
    };
  },
  methods: {
    load() {
      this.loading = true;
      this.getImginfo();
      setTimeout(() => {
        this.loading = false;
      }, 200);

      // this.getImginfo();
      // setTimeout(() => {
      //   this.loading = false;
      // });
    },
    async getImginfo() {
      //let res = await this.$get("/pic.json")
      let res;
      this.reqCount++;
      if (this.lastDay === "" && this.reqCount == 1) {
        console.log("初次请求", this.reqCount);
        res = await this.$get("/imgcenter/displayByDay");
      } else {
        console.log("非初次请求", this.reqCount);
        console.log("nomore情况", this.noMore);
        res = await this.$get("/imgcenter/displayByDay", {
          day: this.lastDay,
        });
      }
      if (res.success == true && res.code == 200) {
        let data = res.data.imageMap;
        this.lastDay = res.data.day;
        for (var date in data) {
          this.dateList.push(date);
          let tempUrl = [];
          let tempId = [];
          for (var i = 0; i < data[date].length; i++) {
            tempUrl.push(BASE_URL + "/" + data[date][i]["url"]);
            tempId.push(data[date][i]["id"]);
          }
          this.imgsUrlArr.push(tempUrl);
          this.imgsIdArr.push(tempId);
        }
        this.$store.dispatch("photo/storeImageInfo", {
          dateList: this.dateList,
        });
      } else if (res.success == true && res.code == 250) {
        console.log("没有更多图片");
        this.noMore = true;
      }
    },
  },
  computed: {
    disabled() {
      return this.loading || this.noMore;
    },
  },
  mounted() {
    console.log("photo界面");
    //this.getImginfo();
  },
};
</script>

<style>
.photo-content {
  display: flex;
  flex-flow: column nowrap;
  margin: 3px 3px;
  height: 100%;
  padding: 1px 1px 1px 1px;
  background: whitesmoke;
}
</style>
